<template>
  <div class="plan-list-page">
    <header class="header">
      <h1>打卡计划列表</h1>
      <div class="filters">
        <select v-model="statusFilter" class="filter-select">
          <option value="all">全部状态</option>
          <option value="active">进行中</option>
          <option value="completed">已完成</option>
          <option value="expired">已过期</option>
        </select>
        <select v-model="sortBy" class="filter-select">
          <option value="created">创建时间</option>
          <option value="progress">完成进度</option>
          <option value="endDate">结束时间</option>
        </select>
      </div>
    </header>

    <div class="plan-grid" v-if="filteredPlans.length > 0">
      <div v-for="plan in filteredPlans" :key="plan.id" class="plan-card">
        <div class="plan-header">
          <h2>{{ plan.title }}</h2>
          <span :class="['status-badge', plan.status]">{{ getStatusText(plan.status) }}</span>
        </div>
        
        <p class="plan-description">{{ plan.description }}</p>
        
        <div class="plan-details">
          <div class="detail-item">
            <span class="label">打卡类型：</span>
            <span>{{ getTypeText(plan.type) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">开始时间：</span>
            <span>{{ formatDate(plan.startDate) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">结束时间：</span>
            <span>{{ formatDate(plan.endDate) }}</span>
          </div>
        </div>

        <ProgressBar
          :current="plan.completedDays"
          :total="plan.totalDays"
          text="完成进度"
        />

        <div class="plan-actions">
          <router-link
            v-if="plan.status === 'active'"
            :to="`/check-in/${plan.id}`"
            class="action-btn check-in"
          >
            打卡
          </router-link>
          <router-link
            :to="`/plan-detail/${plan.id}`"
            class="action-btn detail"
          >
            查看详情
          </router-link>
        </div>
      </div>
    </div>

    <div v-else class="empty-state">
      <p>暂无符合条件的打卡计划</p>
      <router-link to="/plan-create" class="create-btn">
        创建新计划
      </router-link>
    </div>
  </div>
</template>

<script>
import ProgressBar from '@/components/ProgressBar.vue'

export default {
  name: 'PlanList',
  components: {
    ProgressBar
  },
  data() {
    return {
      statusFilter: 'all',
      sortBy: 'created',
      plans: [] // 将从Vuex获取数据
    }
  },
  computed: {
    filteredPlans() {
      let result = [...this.plans]
      
      // 状态筛选
      if (this.statusFilter !== 'all') {
        result = result.filter(plan => plan.status === this.statusFilter)
      }
      
      // 排序
      result.sort((a, b) => {
        switch (this.sortBy) {
          case 'progress':
            return (b.completedDays / b.totalDays) - (a.completedDays / a.totalDays)
          case 'endDate':
            return new Date(b.endDate) - new Date(a.endDate)
          default: // created
            return new Date(b.createdAt) - new Date(a.createdAt)
        }
      })
      
      return result
    }
  },
  created() {
    // TODO: 从Vuex获取数据
    // 模拟数据
    this.plans = [
      {
        id: 1,
        title: '每日阅读',
        description: '每天阅读30分钟，提升自己',
        type: 'daily',
        status: 'active',
        startDate: '2024-01-01',
        endDate: '2024-01-30',
        completedDays: 15,
        totalDays: 30,
        createdAt: '2024-01-01'
      },
      {
        id: 2,
        title: '运动健身',
        description: '每周至少运动3次，保持健康',
        type: 'weekly',
        status: 'active',
        startDate: '2024-01-01',
        endDate: '2024-03-31',
        completedDays: 6,
        totalDays: 12,
        createdAt: '2024-01-02'
      }
    ]
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        active: '进行中',
        completed: '已完成',
        expired: '已过期'
      }
      return statusMap[status] || status
    },
    getTypeText(type) {
      const typeMap = {
        daily: '每日打卡',
        weekly: '每周打卡',
        monthly: '每月打卡'
      }
      return typeMap[type] || type
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.plan-list-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header h1 {
  margin: 0;
  color: #333;
}

.filters {
  display: flex;
  gap: 15px;
}

.filter-select {
  padding: 8px 12px;
  border-radius: 5px;
  background-color: white;
  font-size: 14px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.plan-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 15px;
}

.plan-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-badge.completed {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-badge.expired {
  background-color: #fbe9e7;
  color: #d32f2f;
}

.plan-description {
  margin: 0 0 15px;
  color: #666;
  font-size: 14px;
}

.plan-details {
  margin-bottom: 15px;
}

.detail-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.detail-item .label {
  color: #666;
}

.plan-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.action-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.action-btn.check-in {
  background-color: #4caf50;
  color: white;
}

.action-btn.check-in:hover {
  background-color: #45a049;
}

.action-btn.detail {
  background-color: #f5f5f5;
  color: #333;
}

.action-btn.detail:hover {
  background-color: #e0e0e0;
}

.empty-state {
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.empty-state p {
  margin: 0 0 20px;
  color: #666;
}

.create-btn {
  display: inline-block;
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.create-btn:hover {
  background-color: #45a049;
}
</style>